<template>
  <div class="pie-chart-container">
    <div ref="pieChart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getStatusCount } from "@/api/his/doctor";

export default {
  name: 'DoctorStatusPieChart',
  data() {
    return {
      statusData: [
        { value: 0, name: '在职' },
        { value: 0, name: '休假' },
        { value: 0, name: '离职' }
      ]
    };
  },
  methods: {
    async fetchDoctorStatusData() {
      try {
        const response = await getStatusCount();
        if (response) {
          this.statusData = [
            { value: response.inService, name: '在职' },
            { value: response.onLeave, name: '休假' },
            { value: response.resigned, name: '离职' }
          ];
          this.renderChart(); // 渲染图表
        }
      } catch (error) {
        console.error('获取医生状态数据失败:', error);
      }
    },

    renderChart() {
      const chart = echarts.init(this.$refs.pieChart);
      const options = {
        title: {
          text: '医生状态',
          subtext: '实时数据',
          left: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#333'
          },
          subtextStyle: {
            fontSize: 12,
            color: '#888'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          data: ['在职', '休假', '离职'],
          textStyle: {
            fontSize: 14,
            color: '#333'
          }
        },
        series: [
          {
            name: '医生状态',
            type: 'pie',
            radius: ['40%', '70%'], // 使饼图中心有一个空白圆环
            data: this.statusData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            },
            label: {
              show: true,
              position: 'outside', // 标签显示在外侧
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333'
            },
            labelLine: {
              show: true, // 显示标签指向线
              length: 15, // 延长线长度
              lineStyle: {
                width: 2,
                type: 'solid',
                color: '#333'
              }
            },
            itemStyle: {
              // 使用渐变色
              color: (params) => {
                const colors = [
                  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#ffb6b9' },
                    { offset: 1, color: '#d3836c' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#f6d365' },
                    { offset: 1, color: '#fda085' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#b3e2cd' },
                    { offset: 1, color: '#56ab2f' }
                  ])
                ];
                return colors[params.dataIndex];
              }
            },
            animationType: 'scale', // 动画类型
            animationDuration: 1500, // 动画持续时间
            animationEasing: 'elasticOut', // 动画效果
          }
        ]
      };

      chart.setOption(options);
    }
  },
  created() {
    this.fetchDoctorStatusData(); // 获取数据并渲染图表
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose(); // 销毁图表实例
    }
  }
};
</script>

<style scoped>
.pie-chart-container {
  //margin: 20px 0;
  //padding: 20px;
  //border-radius: 10px;
  //background-color: #f9f9f9; /* 设置背景色，提升视觉效果 */
  //box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
}
</style>
